<style lang="scss">
@import '../static/common/variable.scss';

.search {
  padding: 10px 20px;
  min-height: 1000px;
  background-color: #f0f0f0;

  .history-box {
    margin-bottom: 10px;
    // background-color: #fff;
    padding: 10px 0;
    box-shadow: 0 1px 1px 1px #ccc ;
    border-radius: 4px;
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
      font-size: 15px;
      margin-bottom: 10px;
      .l {
        font-size: 15px;
      }
      .r {
        button {
          background-color: transparent;
          padding: 0 !important;
          color: #fff;
        }
      }
    }

    ol {
      width: 100%;

      &::after {
        content: "";
        display: block;
        clear: both;
      }

      li {
        padding: 2px 10px;
        border: 1px solid #ccc;
        color: #666;
        float: left;
        margin: 0 5px;
        font-size: 15px;
        border-radius: 4px;
      }
    }
  }

  .search-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;

    input {
      height: 40px;
      width: calc(100% - 60px);
      padding-left: 10px;
    }

    button {
      width: 60px;
      height: 40px;
      font-size: 18px;
      border: 2px solid #fff;
      color: $ActiveColor;
    }
  }

  ul {
    li {
      font-size: 16px;
      margin-bottom: 10px;

      a {
        display: block;
        color: #000;
        text-decoration: none;
        background-color: #fff;
        padding: 10px 10px;
        border-radius: 5px;
      }

      .box {
        width: 100%;
        display: flex;
        min-height: 80px;

        .left {
          width: calc(100% - 100px);
          position: relative;

          h4 {
            margin-bottom: 6px;
            width: 100%;
            // 1.单行文本超出转换为省略号；
            // white-space:nowrap;//不换行
            // overflow:hidden;//超出隐藏
            // text-overflow:ellipsis;//超出文本省略号

            // 2.多行文本超出转换为省略号；
            display: -webkit-box; //
            overflow: hidden; //超出部分隐藏
            -webkit-box-orient: vertical;
            line-clamp: 2;
            -webkit-line-clamp: 2; //行数
          }

          .bot {
            width: 100%;
            font-size: 15px;
            color: #666;
            position: absolute;
            bottom: 0;
            left: 0;

            button {
              margin-top: 10px;
              background-color: transparent;
            }
          }
        }

        .right {
          width: 100px;

          .imgbox {
            width: 100px;
            height: 100px;
            text-align: center;
            background-color: red;
            overflow: hidden;

            img {
              // width: 100%;
              display: inline-block;
              height: 100%;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>

<template>
  <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="搜索" sub-title="" @back="jumpTo" />
  <div class="search">
    <div class="search-box">
      <input @keydown.enter="searchArticle" v-model="keyword" type="text" placeholder="关键字">
      <button @click="searchArticle">搜索</button>
    </div>

    <div class="history-box" v-if="data.length == 0">
      <div class="top">
        <div class="l">搜索历史</div>
        <div class="r"><button @click="removeLocal">删除</button></div>
      </div>
      <ol>
        <li v-for="kw in arr_keyword" @click="tabHistory(kw)">{{ kw }}</li>
      </ol>
    </div>

    <ul v-if="data.length != 0">
      <li v-for="item in data">
        <RouterLink :to="{ path: '/detail', query: { id: item.id, article_id: item.article_id } }">
          <div class="box">
            <div class="left">
              <h4>{{ item.article_title }}</h4>
              <div class="bot">
                <p>{{ item.classify_text }}</p>
                <p>{{ formatime(item.article_create_time) }}</p>
              </div>
            </div>
            <div class="right">
              <div class="imgbox">
                <img :src="item.article_src" alt="">
              </div>
            </div>
          </div>
        </RouterLink>
      </li>
    </ul>

    <div v-else>
      <p style="text-align: center; padding: 30px 0; font-size: 18px;">暂无您搜索内的内容~</p>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { articleSearchFn } from '../api/index'
import { message } from 'ant-design-vue'
export default {
  setup() {
    const router = useRouter();

    const jumpTo = () => {
      router.go(-1)
    }

    // 格式化时间
    const formatime = (date: Date | string | any) => {
      if (date) {
        let dt = new Date(date);
        return dt.toLocaleDateString() + " " + dt.toLocaleTimeString();
      }
      else {
        return '0000-00-00 00:00:00';
      }
    }

    interface ListItem {
      id: string;
      article_title: string;
      article_src: string;
      article_id: string;
      article_author: string;
      article_address: string;
      article_content: string;
      article_hot: number;
      article_status: number;
      classify_text: string;
      article_read?: string | null | any;
      article_create_time: string
    }


    let data = ref<ListItem[]>([])
    let keyword = ref('');//记录输入框的值
    let arr_keyword = ref<string[]>([])
    let arr_keyword_loca = localStorage.getItem('arr_keyword')
    let arr:any = []
    if (arr_keyword_loca) {
      arr = JSON.parse(arr_keyword_loca)
      arr_keyword.value = arr;
    }

    const searchArticle = async () => {
      let kw = keyword.value;
      if (kw) {
        // 储存搜索历史
        if (!arr.includes(kw)) {
          arr.push(kw)
          arr_keyword.value = arr;
          localStorage.setItem('arr_keyword', JSON.stringify(arr))
        }
        await articleSearchFn({ keyword: kw })
          .then(
            content => {
              // console.log('xxxxxx',content)
              let { code, result } = content;
              if (code == 200) {
                data.value = result;
              }
            }
          )
      }
    }

    const tabHistory = async (kw: string) => {
      
      if (kw) {
        keyword.value = kw;
        await articleSearchFn({ keyword: kw })
          .then(
            content => {
              // console.log('xxxxxx',content)
              let { code, result } = content;
              if (code == 200) {
                data.value = result;
              }
            }
          )
      }
    }

    watch(keyword, (nVal)=> {
       if(nVal.length == 0) {
          data.value = [];
       }
    })

    const removeLocal = () => {
       if(confirm('确定删除所有记录?')) {
         localStorage.removeItem('arr_keyword')
         arr_keyword.value = []
       }
    }

    return {
      jumpTo,
      formatime,
      searchArticle,
      keyword,
      arr_keyword,
      tabHistory,
      removeLocal,
      data
    }
  }
}
</script>

